// components-biz/vertical-tabs/index.js
const { BaseBehavior, COMPONENT_OPTIONS } = require('../../mixins/component');

Component({
    behaviors: [BaseBehavior],
    options: {
        ...COMPONENT_OPTIONS,
    },
    properties: {
        isHaveTabbar: { type: Boolean, value: false },
        // 顶部预留位置高度
        topHeight: { type: Number, value: 0 },
        // 数据格式任意，推荐格式 ‘{title}’
        tabList: { type: Array, value: [] },
        // tabbar 展示字段值
        tabKey: { type: String, value: 'title' },
        // tabBar 样式
        tabbarClass: { type: String, value: '' },
        // tabBar 选中项样式
        activeClass: { type: String, value: '' },
        // tabBar 侧划线颜色
        tabLineColor: { type: String, value: '#ff0000' },
        // tabBar 非激活 Tab 文字颜色
        tabInactiveTextColor: { type: String, value: '#000000' },
        // tabBar 激活 Tab 文字颜色
        tabActiveTextColor: { type: String, value: '#ff0000' },
        // tabBar 非激活状态背景色
        tabInactiveBgColor: { type: String, value: '#F4F4F6' },
        // tabBar 激活状态背景色
        tabActiveBgColor: { type: String, value: '#ffffff' },
        // 当前激活tab
        activeTab: { type: Number, value: 0 },
    },

    /**
     * 组件的初始数据
     */
    data: {
        currentView: 0,
        isFixed: false,
        contentScrollTop: 0,
        _heightRecords: [],
        // 内容高度对象
        _contentHeight: {},
    },

    observers: {
        activeTab: function(activeTab) {
            this.scrollTabBar(activeTab);
        }
    },
    relations: {
        '../vertical-tabs-content/index': {
            type: 'child', // 关联子节点
            linked: function(target) {
                // 计算高度
                target.calcHeight((rect) => {
                    this.data._contentHeight[target.data.tabIndex] = rect.height
                    if (this._calcHeightTimer) {
                        clearTimeout(this._calcHeightTimer)
                    }

                    this._calcHeightTimer = setTimeout(() => {this.calcHeight()}, 100)
                });
            },
            unlinked: function (target) {
                delete this.data._contentHeight[target.data.tabIndex];
            },
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 初始化参数
        initVertical() {
            this.setData({
                isFixed: false,
                activeTab: 0,
                currentView: 0,
            });
        },
        // 计算高度
        calcHeight() {
            const { tabList, _contentHeight } = this.data;
            const length = tabList.length;
            const _heightRecords = [];
            let temp = 0;
            for (let i = 0; i < length; i++) {
                _heightRecords[i] = temp + (_contentHeight[i] || 0);
                temp =  _heightRecords[i];
            }
            this.setData({
                _heightRecords,
            });
        },
        // 监听滚动
        handleVertricalScroll(event) {
            const { scrollTop } = event.detail;
            const { topHeight } = this.data;
            let isFixed = false;
            if (scrollTop >= topHeight) {
                isFixed = true;
            }
            this.setData({
                isFixed,
            })
        },
        // 监听内容滚动
        handleContentScroll(event) {
            const { scrollTop } = event.detail;
            const { topHeight, tabList, activeTab, _heightRecords } = this.data;
            // console.log('滚动 => ', scrollTop);
            let isFixed = false;
            if (topHeight > 0 && scrollTop >= topHeight) {
                isFixed = true;
            }
            this.setData({
                isFixed,
            })
            if (_heightRecords.length === 0) return;
            const length = tabList.length;
            let index = 0;
            if (scrollTop >= _heightRecords[0]) {
                for (let i = 1; i < length; i++) {
                    if (scrollTop >= _heightRecords[i - 1] && scrollTop < _heightRecords[i]) {
                        index = i;
                        break
                    }
                }
            }
            if (index !== activeTab) {
                this.triggerEvent('change', { index });
                this.setData({
                    activeTab: index,
                });
            }
        },
        // 滚动左侧tab
        scrollTabBar(index) {
            const len = this.data.tabList.length;
            if (len === 0) return;
            let currentView = index < 6 ? 0: index - 5;
            if (currentView >= len) currentView = len - 1;
            this.setData({
                currentView,
            });
        },
        // 滚动右侧内容
        scrollTabContent() {},
        // 点击左侧 tabbar 事件
        handleTabClick(e) {
            const _heightRecords = this.data._heightRecords;
            const index = e.currentTarget.dataset.index;
            const contentScrollTop = _heightRecords[index - 1] || 0;
            this.triggerEvent('tabclick', { index });
            this.setData({
                activeTab: index,
                contentScrollTop,
                isFixed: true,
            });
        },
    }
})
